import React, { useState } from 'react';
import { Tabs, Input, Space, Select, Button, Table, Tag } from 'antd';
import type { TabsProps, TableProps } from 'antd';

interface NumericInputProps {
    style: React.CSSProperties;
    value: string;
    onChange: (value: string) => void;
}
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];
const columns: TableProps<DataType>['columns'] = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        render: (_, { tags }) => (
            <>
                {tags.map((tag) => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === 'loser') {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </>
        ),
    },
    {
        title: 'Action',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <a>Invite {record.name}</a>
                <a>Delete</a>
            </Space>
        ),
    },
];

const NumericInput = (props: NumericInputProps) => {
    // 初始化包含多个字段的状态对象
    const [formObj, setFormObj] = useState({
        number: props.value,
        title: '',
        description: '',
        type: '',
        // 可以继续添加更多字段...
    });

    const { value, onChange, style } = props;
    const changeType = (value: string) => {
        // 更新状态中的 type 字段
        setFormObj(prev => ({ ...prev, type: value }));
    }
    // 统一的输入框变化处理函数
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value: inputValue } = e.target;

        // 特殊处理数字输入框（因为它有额外的格式验证）
        if (name === 'number') {
            const reg = /^-?\d*(\.\d*)?$/;
            if (reg.test(inputValue) || inputValue === '' || inputValue === '-') {
                onChange(inputValue);
                // 更新状态
                setFormObj(prev => ({ ...prev, [name]: inputValue }));
            }
        } else {
            // 普通输入框直接更新状态
            setFormObj(prev => ({ ...prev, [name]: inputValue }));
        }
    };

    // 数字输入框的失焦处理
    const handleBlur = () => {
        let valueTemp = value;
        if (value.charAt(value.length - 1) === '.' || value === '-') {
            valueTemp = value.slice(0, -1);
        }
        const formattedValue = valueTemp.replace(/0*(\d+)/, '$1');
        onChange(formattedValue);
        setFormObj(prev => ({ ...prev, number: formattedValue }));
    };
    const handleSure = () => {
        // 处理提交逻辑
        console.log('提交数据:', formObj);
        // 这里可以添加实际的提交逻辑，比如发送到服务器等   
    };
    return (
        <div>
            <Space size="middle">
                {/* 数字输入框 - 添加name属性 */}
                <Input
                    {...props}
                    name="number"  // 与状态对象中的键名对应
                    onChange={handleInputChange}  // 使用统一处理函数
                    onBlur={handleBlur}
                    placeholder="请输入数字"
                    maxLength={16}
                />

                {/* 标题输入框 - 添加name属性 */}
                <Input
                    style={style}
                    name="title"  // 与状态对象中的键名对应
                    value={formObj.title}
                    onChange={handleInputChange}  // 使用统一处理函数
                    placeholder="请输入标题"
                    maxLength={16}
                />

                {/* 描述输入框 - 新增示例 */}
                <Input
                    style={style}
                    name="description"  // 与状态对象中的键名对应
                    value={formObj.description}
                    onChange={handleInputChange}  // 使用统一处理函数
                    placeholder="请输入描述"
                    maxLength={50}
                />

                {/* 类型输入框 - 新增示例 */}
                <Select
                    style={style}
                    value={formObj.type}
                    onChange={changeType} // 显式传递 name 和选中值
                    placeholder="请选择类型"
                    options={[
                        {
                            value: '',
                            label: '请选择',
                        },
                        {
                            value: '1',
                            label: '1',
                        },
                        {
                            value: '2',
                            label: '2',
                        },
                    ]}
                    maxLength={20}
                />
                <Button type="primary" onClick={handleSure}>确定</Button>
                {/* 如需更多输入框，继续添加即可，无需额外编写处理函数 */}
            </Space>
            <Table<DataType> columns={columns} dataSource={data} />
        </div>

    );
};

const Mall: React.FC = () => {
    const [value, setValue] = useState('');
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '整车',
            children: <NumericInput style={{ width: '200px' }} value={value} onChange={setValue} />,
        },
        {
            key: '2',
            label: '配件',
            children: 'Content of Tab Pane 2',
        },
        {
            key: '3',
            label: 'Tab 3',
            children: 'Content of Tab Pane 3',
        },
    ];
    return <Tabs defaultActiveKey="1" items={items} />
};

export default Mall;
